<template>
  <view class="statistics-container">
    <view class="custom-tabs" :style="tabsContainerStyle">
      <view v-for="(tab, index) in tabs" :key="index" class="tab-item" :class="{ active: activeTab === index }"
        @click="handleTabClick(index)" :style="getTabStyle(index)">
        {{ tab.name }}
      </view>
    </view>

    <view class="ment">
      <scroll-view scroll-y class="scroll-content">
        <view class="content-item">
          <Earlyarrivalstatistics v-if="activeTab === 0" />
          <Latestatistics v-if="activeTab === 1" />
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import Earlyarrivalstatistics from "./Earlyarrivalstatistics.vue";
import Latestatistics from "./Latestatistics.vue";

export default {
  components: {
    Earlyarrivalstatistics,
    Latestatistics
  },
  data () {
    return {
      activeTab: 0,
      prevTab: 0,
      direction: 'left',
      tabs: [
        { name: "早到统计" },
        { name: "迟到统计" }
      ]
    };
  },
  computed: {
    tabsContainerStyle () {
      return {
        '--prev-index': this.prevTab,
        '--current-index': this.activeTab
      };
    }
  },
  methods: {
    handleTabClick (index) {
      this.direction = index > this.activeTab ? 'right' : 'left';
      this.prevTab = this.activeTab;
      this.activeTab = index;
    },
    getTabStyle (index) {
      return {
        '--tab-index': index
      };
    }
  }
};
</script>

<style lang="scss" scoped>
.statistics-container {
  width: 100%;
  height: 100%;

  .ment {
    height: 83vh;
    padding-top: 45px;

    .scroll-content {
      width: 100%;
      box-sizing: border-box;

      .content-item {
        word-break: break-all;
        padding: 10px;
      }
    }
  }
}

.custom-tabs {
  display: flex;
  position: fixed;
  border-bottom: 1px solid #eee;
  z-index: 10;
  height: 48px;
  width: 100%;
  background-color: #ffffff;
  top: 70px;

  .tab-item {
    flex: 1;
    padding: 12px 0;
    text-align: center;
    color: #666;
    transition: color 0.3s ease;
    position: relative;

    &.active {
      color: #000;

      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 2px;
        background: #007AFF;
        transform-origin: center;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        animation: underlineSlide 0.3s forwards;
        transform: translateX(calc((var(--current-index) - var(--prev-index)) * 40%));
      }
    }
  }
}

@keyframes underlineSlide {
  0% {
    transform: translateX(calc((var(--prev-index) - var(--current-index)) * 100%)) scaleX(0.5);
  }

  50% {
    transform: translateX(0) scaleX(1.2);
  }

  100% {
    transform: translateX(0) scaleX(1);
  }
}
</style>
